<template>
  <view class="container">
    <!-- 表单内容 -->
    <u-form class="form-content">
      <!-- 行政区划选择 -->
      <u-form-item label="省份区域" class="form-item" label-width="120">
        <u-input
                v-model="formData.region"
                placeholder="请选择省份区域"
                @click="changeOpenRegionPicker"
                class="custom-input"
        />
        <area-picker
                ref="regionPicker"
                :title="regiontitle"
                titleColor="#808080"
                titleFontSize="14px"
                cancelType="icon"
                cancelColor="#999999"
                cancleFontSize="28rpx"
                confirmColor="#2877FF"
                confirmFontSize="14px"
                confirmFontWeight="500"
                itemFontSize="14px"
                @onClose="closeRegionPicker"
                @onConfirm="confirmRegionPicker"
                :pickerList="listRegion"
        />
      </u-form-item>

      <!-- 证件类型选择 -->
      <u-form-item label="证件类型" class="form-item" label-width="120">
        <view class="arrow-icon-groud">
          <u-input
                  class="custom-input"
                  v-model="formData.plateColor"
                  placeholder="请选择证件类型"
                  @click="changeOpenCarColor"
          />
          <!-- 向下/向上箭头图标 -->
          <u-icon
                  :name="plateColorPickerVisible ? 'arrow-up' : 'arrow-down'"
                  size="20"
                  class="arrow-icon"
          />
        </view>

        <area-picker
                ref="carPicker"
                :title="title"
                titleColor="#808080"
                titleFontSize="14px"
                cancelType="icon"
                cancelColor="#999999"
                cancleFontSize="28rpx"
                confirmColor="#2877FF"
                confirmFontSize="14px"
                confirmFontWeight="500"
                itemFontSize="14px"
                @onClose="closeCarPicker"
                @onConfirm="confirmCarPicker"
                :pickerList="list"
        />
      </u-form-item>

      <!-- 证件号码输入 -->
      <u-form-item label="证件号码" class="form-item" label-width="120">
        <u-input
                v-model="formData.certNumber"
                placeholder="请输入证件号码"
                class="custom-input"
        />
      </u-form-item>
    </u-form>

    <!-- 查询按钮 -->
    <view class="btn-container">
      <u-button @click="submitForm">查询</u-button>
    </view>
  </view>
</template>

<script>
  import areaPicker from "@/components/area-picker/area-picker.vue";
  import { changeCertType, vehiChangeProname } from "@/common/util_complete.js";
  export default {
    components: {
      areaPicker,
    },
    data() {
      return {
        title: "选择证件类型",
        regiontitle: "选择省份区域",
        formData: {
          region: "", // 行政区划
          plateCert: "", // 证件类型
          certNumber: "", // 证件号
        },
        listRegion: [], // 行政区划选择
        list: [], // 证件类型选择
        persons: [
          {
            id: "1",
            name: "马云飞",
            region: "",
            certNumber: "",
          }
        ],
      };
    },
    onLoad(options) {
      this.list = changeCertType(this.list);
      this.listRegion = vehiChangeProname(this.listRegion);
    },

    methods: {
      // 打开车牌颜色选择器
      changeOpenCarColor() {
        this.$refs.carPicker._open();
      },
      // 打开行政区划选择器
      changeOpenRegionPicker() {
        this.$refs.regionPicker._open();
      },

      // 关闭选择器
      closeCarPicker() {
        this.$refs.carPicker._close();
      },
      closeRegionPicker() {
        this.$refs.regionPicker._close();
      },

      confirmCarPicker(checkedValue) {
        this.formData.plateColor = checkedValue;
      },

      confirmRegionPicker(checkedValue) {
        this.formData.region = checkedValue;
      },

      submitForm() {
        this.persons[0].region = this.formData.region;
        this.persons[0].certNumber = this.formData.certNumber;
        const personsJson = JSON.stringify(this.persons);
        uni.navigateTo({
          url: `/pages/hub_ygzw/person/personInfo?persons=${encodeURIComponent(personsJson)}`,
        });
        return;
        if (!this.formData.certNumber) {
          uni.showToast({
            title: "请填写完整信息",
            icon: "none",
          });
          return;
        }
        // 提交表单逻辑
        console.log("查询提交", this.formData);
      },
    },
  };
</script>

<style scoped lang="scss">
  .container {
    padding: 10px;
    background-color: #f3f6fa;
    height: 100vh;
    box-sizing: border-box;
  }

  .form-content {
    background-color: #ffffff;
    padding: 0;
    /* 去掉 padding */
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .form-item {
    padding: 0 10px;
    border-bottom: 1px solid #f1f1f1;
    /* 设置下边框 */
  }

  .custom-input {
    border: none;
    /* 去掉输入框的边框 */
    background-color: transparent;
    /* 使背景透明 */
  }

  .btn-container {
    margin-top: 30px;
    text-align: center;
    position: absolute;
    right: 0;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
    ::v-deep .u-button--info[data-v-461e713c] {
      width: 100%;
      background-color: #2877ff;
      color: #ffffff;
    }
  }

  .arrow-icon-groud {
    position: relative;
    flex: 1;

    .arrow-icon {
      position: absolute !important;
      right: 20px;
      top: 10px;
    }
  }
</style>
